<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水费户号列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/life_housekeeper/wate_index.css" />
		<script src="../../js/statistics.js"></script>
		<script src="../../js/fontset.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">水费</h1>
		    <a class="mui-icon mui-pull-right" id="swiperIn"><span>管理</span></a>
		</header>
	    <div class="mui-content content-vh" id="content">
		    <div class="footer-btn" id="addUser">
		    </div>
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js" ></script>
		<script src="../../plugins/template/template.js"></script>
		<script src="../../js/life_housekeeper/windowTitleView.js"></script>
		<script type="text/html" id="codeTpl">
			{{ if code && code.length }}
			<ul class="mui-table-view list">
			{{ each code as item i}}
		        <li class="mui-table-view-cell" data-code="{{item}}" data-index="{{i}}">
		            <div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-yellow update">修改</a>
						<a class="mui-btn mui-btn-red del">删除</a>
					</div>
					<div class="mui-slider-handle">
						<div class="mui-table-cell list-item">
							<i class="icon icon-water"></i>
							<span class="mui-ellipsis">户号：{{item}}</span>
						</div>
					</div>
		        </li>  
		    {{ /each }}    
		    </ul>
		    {{ /if }}
		</script>
		<script>
			mui.init();
			mui.plusReady(function(){
				var self = plus.webview.currentWebview(),
					userId = plus.storage.getItem("cg_user_id"),
					waterCode = plus.storage.getItem('water_code');
				var selected = true;
				getlist(waterCode);
				mui('#content').on('tap', 'li.mui-table-view-cell', function(event) {
					var el = this,
						code = el.getAttribute('data-code');
						viewOptions = {
							url:'user_water_query.html',
							id:'user_water_query'
							},
							extras = {
								code:code
							};
						restore();	
						mui.addTitleView(viewOptions,extras);
				})
				mui('#content').on('tap', '.mui-btn', function(event) {
					var elem = this,
						classList = this.classList,
						li = elem.parentNode.parentNode,
						code = li.getAttribute('data-code');
						restore();
						mui.swipeoutOpen(li);	
					if (classList.contains('update')) {
							viewOptions = {
								url:'user_water_bind.html',
								id:'user_water_bind'
							},
							extras = {
								code:code
							};
						mui.addTitleView(viewOptions,extras);
					} else if(classList.contains('del')) {
						var btnArray = ['确认', '取消'];
						mui.confirm('确认删除该条记录？', '绑定户号删除', btnArray, function(e){
							if (e.index == 0) {
								var waterCode = plus.storage.getItem('water_code');
								var newArr = waterCode.split(',');
								var index;
									for(var j in newArr){
										if(newArr[j] == code){
											index = j;
										}
									}
									if(index == 'null'){
						    			return;
						   			}
						    	newArr.splice(index,1);
								var dataCode = newArr.join(',');
								plus.nativeUI.showWaiting();
								if(!dataCode || dataCode == ''){
									myAjax('home/water/unbind','get',{'userId':userId},function(result){
										var state = result.code;
										plus.nativeUI.closeWaiting();
										if(state == 0){			
											plus.storage.removeItem('water_code');	
											li.parentNode.removeChild(li);
											mui.toast('删除成功');	
										}
									})
								}else{
									myAjax('home/water/bind','get',{'code':dataCode,'userId':userId},function(result){
										var state = result.code;
										plus.nativeUI.closeWaiting();
										if(state == 0){			
											plus.storage.setItem('water_code',dataCode);
											li.parentNode.removeChild(li);
											mui.toast('删除成功');	
										}
									})
								}	
							} else {
								mui.swipeoutClose(li);								
							}
						});
					}
				});
				document.getElementById("addUser").addEventListener('tap',function(){
					var viewOptions = {
						url:'user_water_default.html',
						id:'water'
					},
					extras = {
					};
					mui.addTitleView(viewOptions,extras)
				},false);
				document.getElementById("swiperIn").addEventListener('tap',function(){
					console.log(selected);
					if($("#content li").length > 0){
						var length = $("#content li").length;
						var count = 0;
						$("#content li").each(function(){
							if(this.classList.contains('mui-selected')){
								count ++ ;
							}	
						});
						if(count == length){
							selected = false;
						}else{
							selected = true;
						}
					}	
					if(!selected){
						selected = true;
						restore();	
					}else{
						selected = false;
						$("#content li").each(function(){
							mui.swipeoutOpen(this);	
						});		
					}			
				},false);
			})
			//			监听自定义事件
			window.addEventListener('bindEvent',function(event){
				var defaultView = plus.webview.getWebviewById("water");
				if(defaultView){
					defaultView.close();
				}
				var code = event.detail.code;
				getlist(code);
//				var _self = plus.webview.currentWebview();
//				_self.reload();
			});
			function getlist(code){
				if(code){
					var arr = code.split(','),
					    obj = {code:arr},
					    codeHtml = template('codeTpl',obj);
					    $("#content ul").remove();
					   	$("#content").prepend(codeHtml);
				}		
				
			}
			function restore(){
				if($("#content li").length > 0){
					$("#content li").each(function(){	
						mui.swipeoutClose(this);
					});
				}	
			}
		</script>
	</body>
</html>